<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <title>{{.title}}</title>
    <link rel="stylesheet" href="../../static/css/base.css">
    <link rel="stylesheet" href="../../static/element/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/css/jquery.json-viewer.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/element/element-ui/lib/index.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/jquery-3.6.0.min.js"></script>
    <script src="../../static/js/jquery.json-viewer.js"></script>
</head>
<body>
<div id="app" style="margin: 0 auto">
    <el-row style="margin-bottom: 10px">
        <el-col :span="24">
            <div class="myHeader">
                <div style="height: 50px;box-shadow: 1px 1px 1px 1px rgba(24,24,24,0.1)">
                    <img style="height: 50px" src="../../static/img/logo.png">
                    <div style="float: right;width: 420px;height: 50px;line-height: 50px">
                        <el-dropdown style="width:340px" @command="selectIp" trigger="click" placement="bottom-start"
                                     size="medium">
                            <el-input v-model="etcdPoint" clearable size="small"></el-input>
                            <el-dropdown-menu slot="dropdown" style="width: 340px">
                                <el-dropdown-item v-for="(ip,i) in etcdPoints" :key="i" :command="ip">
                                    <p v-text="ip" width="340px" style="display: inline-block"></p>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <el-button size="mini" type="primary" @click="init()">连接</el-button>
                    </div>
                    <el-dialog title="数据初始化"
                               :visible.sync="logVisible"
                               width="50%">
                        <el-progress :text-inside="true" :stroke-width="20" :percentage="logPercent"
                                     style="margin-bottom: 10px"></el-progress>
                        <span v-text="logInfo"></span>
                    </el-dialog>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="10">
        <el-col :span="12">
            <div class="myCenter">
                <div style="height: 800px;box-shadow: 1px 1px 1px 1px rgba(24,24,24,0.1);font-size: 16px;">
                    <el-scrollbar style="height:100%;">
                        <el-tree
                                :props="props"
                                :data="etcdCols"
                                node-key="Id"
                                @node-click="handleNodeClick"
                        >
                        </el-tree>
                    </el-scrollbar>
                </div>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="myCenter" style="width: 99%">
                <div style="height: 800px;box-shadow: 1px 1px 1px 1px rgba(24,24,24,0.1)">
                    <el-scrollbar style="height:100%;">
                        <pre id="json-renderer" style="font-size: 16px;font-family: 'Arial','Microsoft YaHei','黑体','宋体',sans-serif;"></pre>
                    </el-scrollbar>
                </div>
            </div>
        </el-col>
    </el-row>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            tabId: "0",
            socket: {},
            logInfo: "",
            logVisible: false,
            etcdPoint: "",
            etcdPoints: [],
            logPercent: 0,
            etcdCols: [],
            etcdValue: "",
            props: {
                label: "Label",
                children: "Children",
                id: "Id"
            }
        },
        created() {
            this.showIP()
            this.webSocket()
        },
        methods: {
            webSocket() {
                const that = this;
                if (typeof (WebSocket) == 'undefined') {
                    this.$notify({
                        title: '提示',
                        message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
                        type: 'warning',
                        duration: 2000
                    });
                } else {
                    const socketUrl = 'ws://127.0.0.1:14462/init';
                    this.socket = new WebSocket(socketUrl);
                    // 监听socket打开
                    this.socket.onopen = function () {
                        console.log('浏览器WebSocket已打开');
                    };
                    // 监听socket消息接收
                    this.socket.onmessage = function (msg) {
                        var parse = JSON.parse(msg.data);
                        if (parse.code === "500") {
                            that.logVisible = false
                            that.$notify({
                                title: '错误',
                                message: parse.msg,
                                type: 'error',
                                duration: 2000
                            });
                        } else {
                            if (parse.percent === "100") {
                                that.logVisible = false
                                that.logInfo = parse.msg;
                                console.log(parse.map)
                                that.initCols();
                                that.logInfo = ""
                                that.logPercent = 0
                                that.etcdValue = ""
                            } else {
                                that.logPercent = parseInt(parse.percent);
                                that.logInfo = parse.msg;
                            }
                        }
                    };
                    // 监听socket错误
                    this.socket.onerror = function () {
                        that.$notify({
                            title: '错误',
                            message: '服务器连接出现错误，无法接收信息，请刷新页面',
                            type: 'error',
                            duration: 2000
                        });
                    };
                    // 监听socket关闭
                    this.socket.onclose = function () {
                        that.$notify({
                            title: '错误',
                            message: '与后台连接已关闭，请刷新页面重新建立连接',
                            type: 'error',
                            duration: 2000
                        });
                    }
                }
            },
            init() {
                var strings = this.etcdPoint.split(":");
                if (strings.length !== 2) {
                    this.$notify({
                        title: '错误',
                        message: '输入ip格式有误',
                        type: 'error',
                        duration: 2000
                    });
                    return
                } else if (strings[0].split(".").length !== 4) {
                    this.$notify({
                        title: '错误',
                        message: '输入ip格式有误',
                        type: 'error',
                        duration: 2000
                    });
                    return;
                }
                axios.post("/bind", {etcdPoint: this.etcdPoint}).then((response) => {
                    this.logVisible = true;
                    this.socket.send("init")
                });
            },
            initCols() {
                axios.post("/getCols", {}).then((response) => {
                    var list = []
                    list.push(response.data)
                    this.etcdCols = list
                });
            },
            handleNodeClick(data) {
                if (data.Children != null) {
                    this.etcdValue = "";
                    this.getValue();
                    return
                } else {
                    axios.post("/getValue", {path: data.Path}).then((response) => {
                        this.etcdValue = response.data;
                        this.getValue();
                    })
                }
            },
            showIP() {
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.open("GET", "/static/ip.xml", false);
                xmlhttp.send();
                xmlDoc = xmlhttp.responseXML;
                //获取video2里的值：video2.mp4
                var tags = xmlDoc.getElementsByTagName("ip");
                for (let i = 0; i < tags.length; i++) {
                    this.etcdPoints.push(tags[i].childNodes[0].nodeValue);
                }
            },
            selectIp(command) {
                this.etcdPoint = command;
            },
            getValue() {
                try {
                    var parse = JSON.parse(this.etcdValue);
                    $('#json-renderer').jsonViewer(parse);
                } catch (e) {
                    $('#json-renderer').innerText = this.etcdValue
                }
            }
        }
    })
</script>
</html>